<script setup>
import { ref, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useStateStore } from '@/stores/state'

const props = defineProps({
  // 菜单项ID（单一页面内唯一标识）
  id: { type: String, default: '' },
  // 菜单项名称
  name: { type: String, default: '' },
  // 路由
  route: { type: String, default: '' },
  // 图标类名
  iconClass: { type: String, default: '' },
  // 是否显示图标（优先级最高）
  notShowIcon: { type: Boolean, default: false },
  // 是否显示名称（优先级最高）
  notShowName: { type: Boolean, default: false },
  // 是否是活动项（优先级最高）
  isActive: { type: Boolean, default: false },
  // 是否是目录
  isDir: { type: Boolean, default: false },
  // 是否展开目录（优先级最高）
  isOpenDir: { type: Boolean, default: false },
  // 是否缩放菜单项（优先级最高）（缩放前显示文字，缩放后不显示文字 幷启动悬浮提示）
  isCollapsed: { type: Boolean, default: false },
  // 是否开启自定义点击函数（优先级最高）
  isOpenClickFunc: { type: Boolean, default: false },
  // 自定义点击函数：更加自由，可以是路由跳转，也可以是其他操作
  clickFunc: { type: Function, default: () => {} },
  // 目录折叠后的图标（仅在isDir为true时生效）
  foldClosedIcon: { type: String, default: 'i-flowbite-angle-down-outline' },
  // 目录展开后的图标（仅在isDir为true时生效）
  foldOpenedIcon: { type: String, default: 'i-flowbite-angle-up-outline' },
})

const showName = computed(() => {
  return props.notShowName ? '' : props.name
})

// 更新活动项
const state = useStateStore()
if(props.isActive) { state.changeLeftActiveID(props.id) }
watch(() => props.isActive, (newVal) => {
  if(newVal) { state.changeLeftActiveID(props.id) }
  else { state.changeLeftActiveID(null) }
  // console.log('props.isActive', props.isActive)
  // console.log('props.id', props.id)
  // console.log('state.leftActiveID', state.leftActiveID)
})
const changeActive = () => {
  if(state.leftActiveID === props.id) {
    state.changeLeftActiveID(null)
  } else { state.changeLeftActiveID(props.id) }
}

const router = useRouter()
// 点击菜单项
const handleClick = () => {
  // 点击菜单项，执行自定义点击函数
  if (props.isOpenClickFunc) {
    props.clickFunc()
    return
  }
  // 点击菜单项，更新左侧活动项
  changeActive()
  // 点击菜单项，路由跳转（依赖vue-router）
  if (props.route!=='') {
    router.push(props.route)
  }
}

// 图标类名（文件图标、目录图标）
const icons = ['i-flowbite-file-chart-bar-outline', 'i-flowbite-folder-duplicate-outline']
const icon = computed(() => {
  if (props.iconClass!== '') return props.iconClass
  return props.isDir? icons[1] : icons[0]
})

// 目录是否展开
const dirIsOpend = ref(props.isOpenDir)
watch(() => props.isOpenDir, (newVal) => {
  dirIsOpend.value = newVal
})
// 目录折叠/展开图标
const foldIcon = ref(props.isOpenDir ? props.foldOpenedIcon : props.foldClosedIcon)
watch(() => dirIsOpend.value, (newVal) => {
  foldIcon.value = newVal ? props.foldOpenedIcon : props.foldClosedIcon
})
// 目录折叠/展开
const changeDirOpend = () => {
  dirIsOpend.value = !dirIsOpend.value
}

// 菜单项是否缩放
const isItemCollapsed = ref(props.isCollapsed)
watch(() => props.isCollapsed, (newVal) => {
  isItemCollapsed.value = newVal
})

// 下面的tooltip-right与ThreeRowsMiddleMain.vue中的overflow-y-auto冲突，暂时未能解决
// 菜单项悬浮提示 :class="{ 'active': state.leftActiveID === id, 'tooltip': isItemCollapsed, 'tooltip-right': !isItemCollapsed }"
</script>

<template>
  <li>
    <a @click="handleClick" 
      :data-tip="name" 
      :class="{ 'active': state.leftActiveID === id }"
    >
      <div v-if="!notShowIcon" :data-tip="name"  class="w-5 h-5" :class="icon"></div>
      {{ isItemCollapsed ? '' : showName }}
      <div v-if="isDir" v-show="!isItemCollapsed"
        @click.stop="changeDirOpend" class="w-5 h-5" :class="foldIcon"></div>
    </a>
    <template v-if="isDir">
      <ul v-show="dirIsOpend && !isItemCollapsed">
        <slot><!-- 子菜单项 --></slot>
      </ul>
    </template>
  </li>
</template>

<style scoped>
/* my-表示自定义类，ta-表示tailwindcss类聚合。至于daisyui类则直接在html标签上添加即可 */
/* [data-tip] {
  position: relative;
}

[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
} */
</style>